<template>
  <div>

    <div>
      <el-input style="width: 200px" placeholder="请输入名称"
                v-model="name"></el-input>
      <el-button style="margin: 5px; color: cadetblue" @click="load">搜索</el-button>
      <el-button style="margin-left: 0; color: #c5b8a5" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-button style="color: cadetblue" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
      <el-popconfirm
        style="margin-left: 10px"
        confirm-button-text='确定'
        cancel-button-text='取消'
        icon="el-icon-info"
        icon-color="#a27e7e"
        title="您确定批量删除这些数据吗？"
        @confirm="handleDeleteBatch"
      >
        <el-button style="color: #cd5c5c" slot="reference" >批量删除<i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>
    </div>

    <el-table :data="tableData" border stripe :header-cell-style="{backgroundColor: '#F2F2E6'}"
              row-key="id" default-expand-all @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" prop="id" label="ID" ></el-table-column>
      <el-table-column align="center" prop="name" label="名称"></el-table-column>
      <el-table-column align="center" prop="path" label="路径"></el-table-column>
      <el-table-column align="center" prop="icon" label="图标" class-name="fontSize16" label-class-name="fontSize12">
        <template slot-scope="scope">
          <i :class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="description" label="描述"></el-table-column>
      <el-table-column label="操作" width="300px" align="center">
        <template slot-scope="scope">
          <a-button style="color: darkolivegreen" @click="handleAdd(scope.row.id)">新增<i class="el-icon-circle-plus-outline"></i></a-button>
          <a-button style="color: cornflowerblue" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></a-button>
          <el-popconfirm
            style="margin-left: 8px"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="#a27e7e"
            title="您确定删除吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <a-button style="color: indianred" slot="reference">删除 <i class = "el-icon-delete"></i></a-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="菜单信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="60px" size="small">
        <el-form-item label="名称:">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="路径:">
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标:">
          <template slot-scope="scope">
            <el-select clearable v-model="form.icon" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.value">
                <i :class="item.value" /> {{item.name}}
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button style="color: lightcoral" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
    import request from "../../utils/request";

    export default {
        name: "Menu",
      data(){
        return{
          name: "",
          path: "",
          icon: "",
          description: "",
          tableData: [],
          total: 0,
          pageNum: 1,
          pageSize: 5,
          dialogFormVisible: false,
          multipleSelection: [],
          form: {},
          options: []
        }
      },
      created() {
          this.load()
      },
      methods:{
        load() {
          // 请求分页查询
          request.get("/menu", {
            params: {
              name: this.name,
            }
          }).then(res => {
            // console.log(res)

            if (res.data !== null) {
              this.tableData = res.data
            } else {
              this.$message.warning("没有搜索结果！")
            }
          })
        },

        save() {
          request.post("/menu", this.form).then(res => {
            if (res) {
              this.$message.success("保存成功!")
              this.dialogFormVisible = false
              this.load()
            } else {
              this.$message.error("保存失败!")
            }
          })
        },

        handleAdd(pid) {
          this.dialogFormVisible = true
          this.form = {}
          if(pid){
            this.form.pid = pid
          }
          this.load()
        },

        handleEdit(row){
          this.form = row
          this.dialogFormVisible = true

          //请求图标的数据
          request.get("/menu/getIcons").then(res =>
            this.options = res.data
          )
        },

        handleDelete(id){
          request.delete("/menu/" + id).then(res => {
            if (res) {
              this.$message.success("删除成功!")
              this.load()
            } else {
              this.$message.error("删除失败!")
            }
          })
        },

        handleSelectionChange(val){
          this.multipleSelection = val

        },

        handleDeleteBatch(){
          let ids = this.multipleSelection.map(v => v.id)
          if(ids.length === 0){
            this.$message.error("请选择要删除的数据!")
          }else {
            request.post("/menu/del/batch", ids).then(res => {
              if (res) {
                this.$message.success("批量删除成功!")
                this.load()
              } else {
                this.$message.error("批量删除失败!")
              }
            })
          }
        },

        reset() {
          this.name = ""
          this.load()
        },
      }

    }
</script>

<style>
  .v-application ul, .v-application ol {
    padding-left: 0 !important;
  }

  .fontSize16{
    font-size: 16px;
  }

  .fontSize12{
    font-size: 12px;
  }

</style>
